<template>


  <div>

    <el-tag
      :key="tag"
      v-for="tag in tags"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)">
      {{tag.name}}
    </el-tag>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
  </div>
</template>

<script>
    export default {
        name: "tagsSet",
        data(){
          return{
            inputVisible: false,
            inputValue: '',
            newTag:{
              id:0,
              name:'',
              type:1,
              scriptId:0
            }
          }
        },
      props:[
        'tags',
        'type', //1.锚点名   2.变量名


      ],
      methods:{
        handleClose(tag) {
          this.tags.splice(this.tags.indexOf(tag), 1);
        },

        showInput() {
          this.inputVisible = true;
          this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        },

        handleInputConfirm() {
          console.log(this.tags)
          let inputValue = this.inputValue;
         let newTag={
            id:0,
              name:'',
              type:1,
              scriptId:0
          }
          newTag.type = this.type
          newTag.name = inputValue
          if (inputValue) {
            this.tags.push(newTag);
          }
          this.inputVisible = false;
          this.inputValue = '';
        }
      }

    }
</script>

<style scoped>

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
